<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en" data-rank="0">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>${project.name }-VChello Saas</title>
		<link href="/resources/src/css/main.css" rel="stylesheet">
   		<link href="/resources/src/css/responsive.css" rel="stylesheet">
		<link href="/resources/src/css/projects-detail.css" rel="stylesheet">
		<link href="/resources/src/css/lib/cropper.min.css" rel="stylesheet">
	</head>
	<body class="sticky-header left-side-collapsed">
		<jsp:include page="../common/left-slide.jsp" flush="true">
	        <jsp:param name="pageHeader" value="projectHeader" />
	    </jsp:include>
		<div class="main-content">
			<jsp:include page="../common/header-start.jsp" />
        	<div class="row scroll-range" style="margin-right:0; margin-left:0;">
               	<div class="right-box text-center">
               		<!--头部（包含标题和logo等内容）和导航-->
               		<jsp:include page="../common/projects-common.jsp" />
               		<!--项目基本信息-->
               		<div class="base-message bg-white text-left">
               			<div class="hand">
               				<h1 class="handing">基本信息</h1>
               				<span class="edit" data-toggle="modal" data-target="#base-message-modal">编辑</span>
               				<%-- <c:if test="${proType==0||authorization==1 }">
	               				<span class="edit" data-toggle="modal" data-target="#base-message-modal">编辑</span>
               				</c:if> --%>
               			</div>
               			<div class="brief">项目简介：<span class="brief-text">${project.proDetail }</span></div>
               			<p class="projects-file">
               				<span class="prospectus">商业计划书：
               				<c:if test="${project.bp!=null&&project.bp!='' }"><a href="${project.bp }" id="bp-file">下载</a></c:if>
               				<c:if test="${project.bp==null||project.bp=='' }">暂无</c:if>
               				</span>
               				<span class="link">产品链接：
               					<c:if test="${project.link!=null&&project.link!='' }"><a href="${project.link }" target="_blank">${project.link }</a></c:if>
               					<c:if test="${project.link==null||project.link=='' }">暂无</c:if>
               				</span>
               			</p>
               			<p class="sort clearfix">
               				<span class="pull-left" data-toggle="tooltip" title="所在地区"><i class="iconfont icon-diqu"></i>${project.area.name }</span>
               				<span class="pull-left" data-toggle="tooltip" title="所属行业"><i class="iconfont icon-xiangmu1" style="font-size:20px"></i>${project.field.fieldName }</span>
               				<span class="pull-left" data-toggle="tooltip" title="融资轮次"><i class="iconfont icon-shuju"></i>${project.round.name }</span>
               				<span class="pull-left" data-toggle="tooltip" title="融资金额"><i class="iconfont icon-jine"></i>${project.money }万<c:if test="${project.currency==1 }">人民币</c:if><c:if test="${project.currency==2 }">美元</c:if></span>
               				<span class="pull-left" data-toggle="tooltip" title="出让股权"><i class="iconfont icon-gupiao-copy" style="font-size:26px;"></i>${project.stock }%</span>
               			</p>
               			<p class="tag clearfix">
               				<span class="pull-left tit">亮点标签</span>
               				<c:forEach items="${project.proLablesList }" var="proLabel">
	               				<span class="pull-left">${proLabel.name }</span>
               				</c:forEach>
               			</p>
               		</div>
               		<!--项目重要历程-->
               		<div class="projects-course bg-white">
               			<div class="hand">
               				<h1 class="handing">项目重要历程</h1>
               				<span class="add" data-toggle="modal" data-target="#project-course-modal">添加</span>
               			</div>
               			<div class="message text-left">
               				<c:forEach items="${project.proMilepostList }" var="milepost">
	               				<div class="message-item clearfix">
	               					<input type="hidden" value="${milepost.id }" id="milepostId"/>
	               					<p class="pull-left"><span class="icon-circle"></span><span class="time">${milepost.time }</span></p>
	               					<p class="text pull-left">${milepost.detail }</p>
	               					<%-- <c:if test="${proType==0||authorization==1 }">
		               					<p class="pull-right btn-select iconfont icon-jiantou">
		               						<span>
		               							<i class="edit">编辑</i>
		               							<i class="del">删除</i>
		               						</span>
		               					</p>
		               				</c:if> --%>
		               				<p class="pull-right btn-select iconfont icon-jiantou">
		               					<span>
		               						<i class="edit">编辑</i>
		               						<i class="del">删除</i>
		               					</span>
		               				</p>
	               				</div>
               				</c:forEach>
               			</div>
               		</div>
               		<!--团队信息-->
               		<div class="team-information bg-white text-left">
               			<div class="hand">
               				<h1 class="handing">团队信息</h1>
               				<span class="add" data-toggle="modal" data-target="#team-modal">添加</span>
               				<%-- <c:if test="${proType==0||authorization==1 }">
               					<span class="add" data-toggle="modal" data-target="#team-modal">添加</span>
               				</c:if> --%>
               			</div>
               			<c:forEach items="${project.proOrganizationList }" var="organiza">
	               			<div class="people-message">
	               				<input type="hidden" value="${organiza.id }"/>
	               				<div class="people-info clearfix">
	               					<p class="pull-left" style="width:291px;">
	               						<span class="people-name">${organiza.name }</span><span class="info">${organiza.position }</span>
	               					</p>
	               					<span class="pull-left people-link">联系方式：<a class="phone">${organiza.phone }</a></span>
	               					<%-- <c:if test="${proType==0||authorization==1 }">
		               					<p class="pull-right btn-select iconfont icon-jiantou">
		               						<span>
		               							<i class="edit">编辑</i>
		               							<i class="del">删除</i>
		               						</span>
		               					</p>
		               				</c:if> --%>
		               				<p class="pull-right btn-select iconfont icon-jiantou">
		               					<span>
		               						<i class="edit">编辑</i>
		               						<i class="del">删除</i>
		               					</span>
		               				</p>
	               				</div>
	               				<p>${organiza.detail }</p>
	               			</div>
               			</c:forEach>
               		</div>
               	</div>
           </div>
        </div>
		
		<!--团队信息模态框-->
        <div class="modal fade" id="team-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header text-center">
		                <h4 class="modal-title">团队信息</h4>
		            </div>
		            <div class="modal-body">
		            	<div class="team-item">
		            		<div class="item old organiza">
		            			<input type="hidden" value="${organiza.id }"/>
		            			<div class="main-message">
		            				<span class="item-label name">姓名：</span><input type="text" class="organizaName" placeholder="请输入姓名" />
		            				<span class="actor">头衔：</span><input type="text" class="organizaPosition" placeholder="请输入头衔" />
		            				<span class="phone">手机：</span><input type="text" class="organizaPhone" placeholder="请输入手机号码" />
		            			</div>
		            			<div class="project-bewrite clearfix">
		            				<span class="item-label pull-left">个人简介：</span>
		            				<textarea class="comment-text pull-left" maxlength="500" placeholder="请输入详情"></textarea>
		            			</div>
		            			<div class="item-tips clearfix">
		            				<div class='error pull-left'></div>
		            				<div class="show-word pull-right">还可以输入<i>500</i>字</div>
		            			</div>
		            		</div>
		            	</div>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default cancel" data-dismiss="modal">关闭</button>
		                <button type="button" class="btn save">保存</button>
		            </div>
		        </div>
		    </div>
		</div>
		
		<!--基本信息模态框-->
        <div class="modal fade" id="base-message-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header text-center">
		                <h4 class="modal-title">基本信息</h4>
		            </div>
		            <div class="modal-body">
		            	<div class="team-item">
		            		<div class="item">
		            			<!--项目名称-->
		            			<div class="project-name">
		            				<span class="item-label">项目名称：</span><input type="text" placeholder="请输入项目名称" value="${project.name }" id="projectName">
		            			</div>
		            			<!--项目简介-->
		            			<div class="project-brief clearfix">
		            				<span class="item-label pull-left">项目简介：</span>
		            				<textarea class="comment-text pull-left" placeholder="请输入项目简介" id="proDetail">${project.proDetail }</textarea>
		            			</div>
		            			<div class="item-tips clearfix">
		            				<div class='error pull-left'></div>
		            				<div class="show-word pull-right">还可以输入<i>500</i>字</div>
		            			</div>
		            			<div class="clearfix">
		            				<!--项目领域选项-->
		            				<span class="item-label pull-left">项目领域：</span>
		            				<div class="select pull-left">
		            					<i class="iconfont icon-control-arr-copy-copy"></i>
										<input data-value="${project.fieldId }" value="${project.field.fieldName }" type="text" id="business" readonly="readonly" placeholder="请选择行业"/>
										<div class="options-box">
											<c:forEach items="${fieldList }" var="field">
												<c:if test="${project.fieldId == field.id }">
													<span class="options selected" data-value="${field.id }" title="${field.fieldName }">${field.fieldName }<i class="pull-right iconfont icon-gou"></i></span>
												</c:if>
												<c:if test="${project.fieldId != field.id }">
													<span class="options" data-value="${field.id }" title="${field.fieldName }">${field.fieldName }<i class="pull-right iconfont icon-gou"></i></span>
												</c:if>
											</c:forEach>
										</div>
									</div>
									<!--地区选项-->
									<span class="item-label mar-left pull-left">所在地区：</span>
									<div class="select pull-left">
										<input data-value="${project.areaId }" type="text" id="area" style="display:none;"/>
										<i class="iconfont icon-control-arr-copy-copy"></i>
										<input type="text" class="city" placeholder="请选择地区" value="${project.area.name }"/>
										<div class="options-box selCity">
											<c:forEach items="${areaList }" var="area">
												<c:if test="${project.areaId == area.id }">
													<span class="options selected" data-value="${area.id }">${area.name }<i class="pull-right iconfont icon-gou"></i></span>
												</c:if>
												<c:if test="${project.areaId != area.id }">
													<span class="options" data-value="${area.id }">${area.name }<i class="pull-right iconfont icon-gou"></i></span>
												</c:if>
											</c:forEach>
										</div>
									</div>
		            			</div>
		            			<div class="mar-top clearfix">
		            				<!--轮次选项-->
		            				<span class="item-label  pull-left">当前轮次：</span>
									<div class="select pull-left">
										<i class="iconfont icon-control-arr-copy-copy"></i>
										<input data-value="${project.roundId }" type="text" id="round" readonly="readonly" value="${project.round.name }"/>
										<div class="options-box">
											<c:forEach items="${roundList }" var="round">
												<c:if test="${project.roundId == round.id }">
													<span class="options selected" data-value="${round.id }">${round.name }<i class="pull-right iconfont icon-gou"></i></span>
												</c:if>
												<c:if test="${project.roundId != round.id }">
													<span class="options" data-value="${round.id }">${round.name }<i class="pull-right iconfont icon-gou"></i></span>
												</c:if>
											</c:forEach>
										</div>
									</div>
									<!--融资金额选项-->
									<span class="item-label mar-left  pull-left">融资金额：</span>
									<div class="pull-left">
										<input type="text" id="money" value="${project.money }万" style="width:130px;" />
									</div>
									<div class="select pull-left">
										<i class="iconfont icon-control-arr-copy-copy"></i>
										<c:if test="${project.currency==1 }">
											<input data-value="${project.currency }" type="text" id="currency" readonly="readonly" value="人民币"/>
										</c:if>
										<c:if test="${project.currency==2 }">
											<input data-value="${project.currency }" type="text" id="currency" readonly="readonly" value="美元"/>
										</c:if>
										<div class="options-box">
										<c:if test="${project.currency==1 }">
											<span class="options selected" data-value="1">人民币<i class="pull-right iconfont icon-gou"></i></span>
											<span class="options" data-value="2">美元<i class="pull-right iconfont icon-gou"></i></span>
										</c:if>
										<c:if test="${project.currency==2 }">
											<span class="options" data-value="1">人民币<i class="pull-right iconfont icon-gou"></i></span>
											<span class="options selected" data-value="2">美元<i class="pull-right iconfont icon-gou"></i></span>
										</c:if>
										</div>
									</div>
		            			</div>
		            			<!--股权出让比例和产品链接-->
		            			<div class="mar-top clearfix">
		            				<span class="item-label pull-left">出让股权：</span>
		            				<div class="pull-left"><input class="equity" type="text" value="${project.stock }%" id="stock"></div>
									<span class="item-label mar-left pull-left">产品链接：</span>
									<div class="pull-left"><input class="link" type="text" value="${project.link }" id="link"></div>
		            			</div>
		            			<!--项目标签-->
		            			<div class="mar-top clearfix">
		            				<span class="item-label pull-left">项目标签：</span>
		            				<div class="tag-box pull-left">
			               				<c:forEach items="${project.proLablesList }" var="proLabel">
		            						<span class="tag pull-left"><i class="text">${proLabel.name }</i><i class="iconfont icon-shanchu del"></i></span>
			               				</c:forEach>
		            				</div>
		            				<div class="pull-right">
		            					<input type="text" class="tag-text"><span class="add" style="margin-right:20px;"><i class="iconfont icon-icon-xinjian"></i>添加</span>
		            				</div>
		            			</div>
		            			<!--上传商业计划书-->
		            			<div class="mar-top clearfix">
		            				<span class="item-label pull-left" style="width:95px;">商业计划书：</span>
		            				<c:if test="${project.bp!=null&&project.bp!='' }"><a class="pull-left elli book-name">下载</a></c:if>
               				        <c:if test="${project.bp==null||project.bp=='' }"><a class="pull-left elli book-name">暂无</a></c:if>
		            				<div class="upload pull-left text-center">
		            					<span class="upload-btn" id="BpButton"><i class="iconfont icon-icon-xinjian"></i>上传</span>
		            				</div>
		            				<div class="pull-left pmgressbar-box">
		            					<div class="pmgressbar pull-left" id="bpProgressBar"><span></span></div>
		            				</div>
		            			</div>
		            		</div>
		            	</div>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default cancel" data-dismiss="modal">关闭</button>
		                <button type="button" class="btn save">保存</button>
		            </div>
		        </div>
		    </div>
		</div>
		<!--添加项目重要历程模态框-->
		<div class="modal fade" id="project-course-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header text-center">
		                <h4 class="modal-title">项目重要历程</h4>
		            </div>
			            <div class="modal-body">
			            	<div class="team-item">
			            		<div class="item old milepost">
			            			<input type="hidden" value="${milepost.id }"/>
			            			<div class="main-message">
			            				<span class="item-label name">时间：</span><input type="text" class="date-picker" readonly="readonly" placeholder="请选择时间"/>
			            			</div>
			            			<div class="project-bewrite clearfix">
			            				<span class="item-label pull-left">详情：</span>
			            				<textarea class="comment-text pull-left" maxlength="500" placeholder="请输入详情"></textarea>
			            			</div>
			            			<div class="item-tips clearfix">
			            				<div class='error pull-left'></div>
			            				<div class="show-word pull-right">还可以输入<i>500</i>字</div>
			            			</div>
			            		</div>
			            	</div>
			            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default cancel" data-dismiss="modal">关闭</button>
		                <button type="button" class="btn save">保存</button>
		            </div>
		        </div>
		    </div>
		</div>
		<!--删除确认模态框-->
		<div class="modal fade" id="del-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<input type="hidden" value="" id="del_prpgrass"/>
			<div class="modal-dialog">
				<div class="modal-content text-center">
					<div class="modal-body">
						<div class="text-tip">是否确认删除该历程？</div>
					</div>
					<div class="modal-footer text-center">
						<button type="button" class="btn btn-default cancel" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary confirm" data-dismiss="modal">确认</button>
					</div>
				</div>
			</div>
		</div>
		
		<!--logo裁剪模态框-->
        <div id="cutpic-modal">
        	<div class="cutpic-content">
        		<div class="cutpic-body clearfix">
        			<div class="current-pic pull-left">
	        			<img src="/resources/src/images/project-logo.png"/>
	        		</div>
	        		<div class="preview-container pull-left text-center">
	        			<div class="preview"></div>
	        			<p>效果预览</p>
	        		</div>
        		</div>
        		<div class="cutpic-footer">
        			<p class="current-pic-btn"><button class="cancel-upload-logo">取消</button><button class="save-cut-logo">保存</button></p>
        		</div>
        	</div>
        </div>
       	<input type="hidden" id="proId" value="${project.id }"/>
        <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
	    <script src="https://cdn.bootcss.com/jquery.nicescroll/3.7.0/jquery.nicescroll.js"></script>
	    <script src="/resources/src/js/bootstrap.min.js"></script>
	    <script src="/resources/src/js/main.js"></script>
	    <script src="/resources/src/js/moment.min.js"></script>
	    <script src="/resources/src/js/daterangepicker.js"></script>
	    <script src="/resources/src/js/projects-common.js"></script>
	    <script src="/resources/src/js/project-manager-left.js"></script>
	    <script src="/resources/src/js/projects-detail.js"></script>	
   	   <jsp:include page="/common/plupload/pluploadInclude.jsp"></jsp:include>
   	      
	   <script type="text/javascript">
	   	   $(function(){
	   	   	   uploadLogo();
	   		   uploadBP();
	   	   });
	   	   
	   	   //上传logo图片
	       function uploadLogo(){
		       	/********上传头像********/
		       	var clickId = "logoButton"; //上传按钮id
		       	var fileName = "imageFile"; //文件对应服务器名字
		       	var url = '/uploadFile/img';
		       	var maxFileSize = '5mb'; //文件最大尺寸
		       	var FileType = 'jpg,gif,png,jpeg'; //文件类型
		       	var progressBar = ''; //文件上传进度条
		       	var successType = 'img'; //文件处理类型判断，主要用于区分裁剪功能
		       	var showImgDiv = '.current-pic img' //文件上传后，显示在哪个DIV
		       	uploadFile(fileName, url, clickId, maxFileSize, FileType, progressBar, successType, showImgDiv); //上传图片
	       }
	       
	       function uploadBP(){
		       	/********上传BP********/
		       	var clickId = "BpButton"; //上传按钮id
		       	var fileName = "bpFile"; //文件对应服务器名字
		       	var url = '/uploadFile/bp';
		       	var maxFileSize = '30mb'; //文件最大尺寸
		       	var FileType = 'ppt,pptx,doc,docx,pdf'; //文件类型
		       	var progressBar = '#bpProgressBar'; //文件上传进度条
		       	var successType = 'BPFile'; //文件处理类型判断，主要用于区分裁剪功能
		       	var showImgDiv = '#BpButton' //文件上传后，显示在哪个DIV
		       	uploadFile(fileName, url, clickId, maxFileSize, FileType, progressBar, successType, showImgDiv); //上传图片
	       };
	   </script>
	   
	   <script src="/resources/src/js/cropper.min.js"></script> 
   	   <script>
   	        jQuery(function($){
   	        	
   	        	var cutPicData={};

        		$(".current-pic>img").cropper({
				    aspectRatio: 1 / 1,
				    preview:'.preview',
				    minCropBoxWidth:150,
				    minCropBoxHeight:150,
				    crop: function(e) {
				    	//获取图片裁剪参数
				    	cutPicData.x=parseInt(e.x);
					    cutPicData.y=parseInt(e.y);
					    cutPicData.width=parseInt(e.width);
					    cutPicData.height=parseInt(e.height);
					    cutPicData.src=$(".current-pic>img").attr('src');
				    }
				}); 
   	        	
				//保存裁剪
				$(".save-cut-logo").click(function(){
					$.post(
						"/projects/cutLogo",
						{
							"x":cutPicData.x,
							"y":cutPicData.y,
							"width":cutPicData.width,
							"height":cutPicData.height,
							"url":cutPicData.src
						},
						function(data){
							if(data.status==true){
								$.post(
										"/projects/updateLogo",
										{"proId":$("#proId").val(), "url":data.data},
										function(datas){
											if(datas.status==true){
												$(".projects-logo").empty();
												$(".projects-logo").html('<img src="'+data.data+'" width="100" height="100" />');
											}
										},"json"
								);
							}
						},"json"
					);
					
					
					//关闭裁剪框
					$("#cutpic-modal").hide();
				});
				
				$(".cancel-upload-logo").click(function(){
					$("#cutpic-modal").hide();
				});
				
				
			  
			});
   	   </script>
       
	</body>
</html>